
import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity,Image } from 'react-native'
import color from '../../../widget/color'
import { screen, system } from '../../../common'
import CategoryGridItem from './CategoryGridItem'
import {Title} from '../../../widget/Text'


type Props = {
    infos: Array<Object>,//二级分类
    onGridSelected: Function,//点击二级分类的触发时间
    showALl: boolean,//是否显示全部按钮
    lineNumber: number,//一行显示几个
}


class CategoryGridView extends PureComponent<Props> {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.container}>
                {this.props.infos.map((info, index) => (

                    <CategoryGridItem
                        info={info}
                        lineNumber={this.props.lineNumber}
                        key={index}
                        onPress={() => this.props.onGridSelected(info)}
                    />
                ))}
                {this.props.showALl &&
                    <TouchableOpacity style={styles.allcontainer}

                        onPress={this.props.onPress}>
                        <Image
                            style={styles.icon}
                            resizeMode={'contain'}
                            source={require('../../../img/home/all.png')} />
                        <Title>
                            全部
                        </Title>
                    </TouchableOpacity>
                }
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        borderTopWidth: screen.onePixel,
        borderLeftWidth: screen.onePixel,
        borderColor: color.border,
    },
    allcontainer: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        width: screen.width / 5 - screen.onePixel,
        height: screen.width / 5 - screen.onePixel,
        // borderBottomWidth: screen.onePixel,
        // borderRightWidth: screen.onePixel,
        borderColor: color.border
    },
    icon: {
        width: screen.width / 10,
        height: screen.width / 10,
        borderRadius: 10,
    }
})


export default CategoryGridView
